<template>
	<view class="my-focus-page">
		<view class="mypage" v-for="(item, index) in list" :key="index">
			<view class="mypages">

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						name: '飞翔的菠萝',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
					{
						name: '巴拿马',
						icon: '/static/logo.png',
						show: false,
					},
				]
			}
		},
		methods: {

		}
	}
</script>
<style lang="scss" scoped>
	.my-focus-page {
		display: flex;
		flex-wrap: wrap;
	}

	.mypage {
		width: 24%;
		height: 100px;
		background-color: skyblue;
		margin-top: 15px;
	}

	.mypage:not(:nth-child(4n)) {
		margin-right: calc(4% / 3);
	}
</style>
